<template>
  <div class="box">
    <share-login-header></share-login-header>
    <!-- 手机验证找回密码 -->
    <div class="content">
      <div class="title">
        <p>找回密码</p>
      </div>
      <div class="input_box">
        <input type="text" placeholder="请输入手机号" />
      </div>
      <div class="input_box">
        <input type="text" placeholder="请输入验证码" />
        <button class="code_button" @click="getCode($event)">获取验证码</button>
      </div>
      <div class="menu"></div>
      <button class="submit" @click="next()">下一步</button>
      <div class="go_register">
        <p>
          <span>已有账号，去</span>
          <router-link to="/shareSet/login" style="color:#2F90F1">登录</router-link>
        </p>
      </div>
    </div>
    <div class="footer_title">
      <p>
        更多丰富功能，可登录web端：
        <span>https://pan.ddbes.com/</span>
      </p>
    </div>
  </div>
</template>

<script>
import shareLoginHeader from "@/components/ExtractSharedFiles/shareLoginHeader";
export default {
  components: {
    shareLoginHeader
  },
  data() {
    return {
      show: 1,
      waitTime: 60
    };
  },
  methods: {
    phoneVerify() {
      this.show = false;
    },
    passwordVerify() {
      this.show = true;
    },
    getCode(e) {
      console.log(e.currentTarget.innerHTML);
      this.time(e.currentTarget);
    },
    time(ele) {
      var that = this;
      if (this.waitTime == 0) {
        ele.disabled = false;
        ele.innerHTML = "获取验证码";
        this.waitTime = 60; // 恢复计时
      } else {
        ele.disabled = true;
        ele.innerHTML = this.waitTime + "秒后重试";
        this.waitTime--;
        setTimeout(function() {
          that.time(ele); // 关键处-定时循环调用
        }, 1000);
      }
    },
    next() {
      this.$router.push("/shareSet/perfectInformation");
    }
  },
  mounted() {
    (function(doc, win) {
      var docEl = win.document.documentElement;
      var resizeEvt =
        "orientationchange" in window ? "orientationchange" : "resize";
      var refreshRem = function() {
        var clientWidth =
          win.innerWidth ||
          doc.documentElement.clientWidth ||
          doc.body.clientWidth;
        if (!clientWidth) return;
        var fz;
        var width = clientWidth;
        fz = (((16 * width) / 375) * 10) / 16;
        docEl.style.fontSize = fz + "px";
      };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, refreshRem, false);
      doc.addEventListener("DOMContentLoaded", refreshRem, false);
      refreshRem();
    })(document, window);
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.box .content {
  width: 100%;
  flex: 1;
  position: relative;
  padding: 4rem;
}
.content .title {
  margin-bottom: 5rem;
}
.content .title p {
  color: #333333;
  font-size: 2rem;
}
.content .input_box {
  display: flex;
  /* justify-content:center; */
  align-items: center;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #cdcdcd;
  font-size: 1.5rem;
  margin-top: 1rem;
}
.content .input_box input {
  border: none;
  background-color: none;
  outline: none;
  /* width: 90%; */
  flex: 1;
}
.submit {
  width: 100%;
  height: 5rem;
  background-color: #e9e8eb;
  border-radius: 45px;
  border: none;
  outline: none;
  color: #fff;
  font-size: 1.5rem;
  margin-top: 2rem;
}
.go_register {
  font-size: 1.4rem;
  text-align: center;
  margin-top: 8rem;
}
.code_button {
  color: #3493f1;
  font-size: 1.5rem;
  background: none;
  border: none;
  outline: none;
  margin-left: 2rem;
  width: 10rem;
}
.menu {
  width: 100%;
  height: 3rem;
  margin-top:1.3rem;
}
.footer_title {
  width: 100%;
  color: #aaaaaa;
  font-size: 1.1px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 1rem;
  text-align: center;
}
.footer_title p span {
  color: #809cc3;
}
</style>